<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目卡片组件</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="blog_theme.css">
    <style>
        :root {
            --background: oklch(0.15 0 0);
            --foreground: oklch(0.95 0 0);
            --card: oklch(0.20 0 0);
            --card-foreground: oklch(0.95 0 0);
            --popover: oklch(0.20 0 0);
            --popover-foreground: oklch(0.95 0 0);
            --primary: oklch(0.70 0.20 250);
            --primary-foreground: oklch(0.15 0 0);
            --secondary: oklch(0.60 0.15 300);
            --secondary-foreground: oklch(0.15 0 0);
            --muted: oklch(0.30 0 0);
            --muted-foreground: oklch(0.70 0 0);
            --accent: oklch(0.50 0.15 280);
            --accent-foreground: oklch(0.95 0 0);
            --destructive: oklch(0.65 0.25 25);
            --destructive-foreground: oklch(0.95 0 0);
            --border: oklch(0.30 0 0);
            --input: oklch(0.30 0 0);
            --ring: oklch(0.70 0.20 250);
            --chart-1: oklch(0.70 0.20 250);
            --chart-2: oklch(0.60 0.15 300);
            --chart-3: oklch(0.50 0.15 280);
            --chart-4: oklch(0.65 0.10 200);
            --chart-5: oklch(0.55 0.18 330);
            --sidebar: oklch(0.20 0 0);
            --sidebar-foreground: oklch(0.95 0 0);
            --sidebar-primary: oklch(0.70 0.20 250);
            --sidebar-primary-foreground: oklch(0.15 0 0);
            --sidebar-accent: oklch(0.50 0.15 280);
            --sidebar-accent-foreground: oklch(0.95 0 0);
            --sidebar-border: oklch(0.30 0 0);
            --sidebar-ring: oklch(0.70 0.20 250);
            --font-sans: Geist, sans-serif;
            --font-serif: Merriweather, serif;
            --font-mono: Geist Mono, monospace;
            --radius: 0.5rem;
            --shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
            --shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.10);
            --shadow-sm: 0 2px 4px 0 hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
            --shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.10), 0 2px 4px -2px hsl(0 0% 0% / 0.10);
            --shadow-md: 0 6px 10px -1px hsl(0 0% 0% / 0.10), 0 4px 6px -2px hsl(0 0% 0% / 0.10);
            --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.10);
            --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.10), 0 8px 10px -6px hsl(0 0% 0% / 0.10);
            --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
            --tracking-normal: 0em;
            --spacing: 0.25rem;
        }
        
        body {
            background-color: var(--background);
            color: var(--foreground);
            font-family: var(--font-sans);
        }
        
        .project-card {
            background-color: var(--card);
            color: var(--card-foreground);
            border-radius: var(--radius);
            transition: all 0.3s ease;
        }
        
        .project-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }
        
        .preview-container {
            height: 200px;
            overflow: hidden;
            border-radius: calc(var(--radius) - 0.125rem);
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: var(--primary-foreground);
            border-radius: var(--radius);
            transition: all 0.2s ease;
        }
        
        .btn-primary:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }
        
        .btn-secondary {
            background-color: var(--secondary);
            color: var(--secondary-foreground);
            border-radius: var(--radius);
            transition: all 0.2s ease;
        }
        
        .btn-secondary:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen p-8">
    <div class="max-w-4xl mx-auto">
        <h1 class="text-3xl font-bold mb-8 text-center">项目卡片组件示例</h1>
        
        <!-- 项目卡片 -->
        <div class="project-card p-6 mb-6">
            <div class="preview-container bg-gray-800 mb-4 rounded-lg overflow-hidden">
                <!-- 这里将嵌入项目的iframe预览 -->
                <div class="w-full h-full flex items-center justify-center">
                    <p class="text-gray-400">项目预览区域</p>
                </div>
            </div>
            
            <h2 class="text-2xl font-bold mb-2">项目标题</h2>
            <p class="text-gray-300 mb-4">这是一个项目描述。在这里可以简要介绍项目的主要功能、使用的技术栈以及解决的问题。</p>
            
            <div class="flex space-x-3">
                <button class="btn-primary px-4 py-2 font-medium">查看详情</button>
                <button class="btn-secondary px-4 py-2 font-medium">源码地址</button>
            </div>
        </div>
    </div>
</body>
</html>